<template>
	<div class="ml-register2">
		<div v-show="showPop" class="pop" id="register-pop"></div>
		<div v-show="showPop" class="pop-box ml-bg-register-014" id="pop-box">
			<div class="logo-box ">
				<div class="ml-icon-register-013"></div>
				<ul>
					<li>盈鱼理财</li>
					<li>天天有盈鱼</li>
				</ul>
			</div>
			<p class="big-text">恭喜您注册成功!</p>
			<p>投资得奖励金，瓜分<span>百万奖池</span>，累计赢取<span>iphoneX!!</span></p>
			<p  v-on:click="goDownload" class="btn">立即下载盈鱼理财</p>
		</div>
		<div class="ml-bg-register-008"></div>
		<div class="input-box">
			<p><input class="user-input" v-model="tel" type="number" placeholder="请输入手机号"/></p>
			<p>
				<input class="code-input" v-model="imgCode" type="text" placeholder="请输入"/>
				<img v-on:click="getImg" :src="imgSrc" alt="" />
			</p>
			<p>
				<input class="code-input" v-model="code" type="number" placeholder="请输入验证码"/>
				<span v-on:click="getMsg($event)">{{msg}}&nbsp;{{msgS}}</span>
			</p>
			<div v-on:click="register">立即注册</div>
		</div>	
		<div class="ml-bg-register-009">
			<p>购买定期产品可获得抽取</p>
			<p><span>最高</span>10-3999<span>元</span></p>
			<p>随机奖励金一笔</p>
			<p>奖励金可在购买定期产品时全额计入本金</p>
		</div>
		<div class="ml-bg-register-010" style="margin-top:40px;"></div>
		<div class="ml-bg-register-013" style="margin-top:20px;"></div>
		<div class="ml-bg-register-011" style="margin-top:40px;"></div>
		<div class="ml-bg-register-012" style="margin-top:40px;"></div>
		<ul class="adv-ul">
			<li>
				<div class="ml-icon-register-003"></div>
				<p class="title">安全保障</p>
				<p class="content">国企控股 银行存管<br />专业多级风控审核</p>
			</li>
			<li >
				<div class="ml-icon-register-005"></div>
				<p class="title">优质项目</p>
				<p class="content">低门槛  100元起购  <br />操作简单  随存随取</p>
			</li>
			<li >
				<div class="ml-icon-register-004"></div>
				<p class="title">福利不断</p>
				<p class="content">邀请好友拿奖励<br />投资理财赢大奖</p>
			</li>
		</ul>		
		<p class="bottom1">Copyright© 2017-2057 浙江康宏投资管理有限公司 </p>
		<p class="bottom3">浙ICP备18001503号-1</p>
		<p class="bottom2">
			<span>浙江康宏投资管理有限公司</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<span>市场有风险  理财需谨慎</span>
		</p>
		<div class="msg" v-show="showMsg" style="text-align:center;position:fixed;z-index: 999999999;width: 100%;"><div style="padding: 10px; border-radius: 4px;color:#fff; background:#5F6161; display:inline-block; " class="ml-message">{{alertMsg}}</div></div>
	</div>

</template>

<script>
import md5 from "../../config/md5.js"
import request from "../../config/request.js"
import judgeSystem from "../../config/judgeSystem.js"
export default {
	data() {
		return {
			tel:'',
			code:'',
			num:'',
			confirm:true,
			msg:'获取验证码',
			msgS:null,
			alertMsg:null,
			showMsg:false,
			system:null,
			channel:null,
			downloadUrl:null,
			showPop:false,
			imgCode:'',
			imgSrc:null
		}
	},
	created() {
        (function(root) {
            root._tt_config = true;
            //
            var ta = document.createElement('script'); ta.type = 'text/javascript'; ta.async = true;
            ta.src = document.location.protocol + '//' + 's1.pstatp.com/bytecom/resource/track_log/src/toutiao-track-log.js';
            ta.onerror = function () {
                var request = new XMLHttpRequest();
                var web_url = window.encodeURIComponent(window.location.href);
                var js_url  = ta.src;
                var url = '//ad.toutiao.com/link_monitor/cdn_failed?web_url=' + web_url + '&js_url=' + js_url + '&convert_id=93384419857';
                request.open('GET', url, true);
                request.send(null);
            }
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ta, s);
            //今日头条ff
            var ta1 = document.createElement('script'); ta.type = 'text/javascript'; ta.async = true;
            ta1.src = document.location.protocol + '//' + 's1.pstatp.com/bytecom/resource/track_log/src/toutiao-track-log.js';
            ta1.onerror = function () {
                var request = new XMLHttpRequest();
                var web_url = window.encodeURIComponent(window.location.href);
                var js_url  = ta.src;
                var url = '//ad.toutiao.com/link_monitor/cdn_failed?web_url=' + web_url + '&js_url=' + js_url + '&convert_id=93645955728';
                request.open('GET', url, true);
                request.send(null);
            }
            var s1 = document.getElementsByTagName('script')[0]; s1.parentNode.insertBefore(ta1, s1);
            //硬核
            var ta2 = document.createElement('script'); ta2.type = 'text/javascript'; ta2.async = true;
            ta2.src = document.location.protocol + '//' + 's1.pstatp.com/bytecom/resource/track_log/src/toutiao-track-log.js';
            ta2.onerror = function () {
                var request = new XMLHttpRequest();
                var web_url = window.encodeURIComponent(window.location.href);
                var js_url  = ta2.src;
                var url = '//ad.toutiao.com/link_monitor/cdn_failed?web_url=' + web_url + '&js_url=' + js_url + '&convert_id=93645923479';
                request.open('GET', url, true);
                request.send(null);
            }
            var s2 = document.getElementsByTagName('script')[0]; s2.parentNode.insertBefore(ta2, s2);
        })(window);
	},
	mounted(){
		var h = window.innerHeight;
		this.$(".ml-register2 .msg").css("bottom",h*0.2);
		var detect = judgeSystem.detect(navigator.userAgent);
		var self = this;
		self.getImg();
		var popBox= document.getElementById("pop-box");
		$(popBox).height($(popBox).width());
		popBox.addEventListener("touchmove", function(e) {
			e.preventDefault();
		}, false);
		var registerPop= document.getElementById("register-pop");
		registerPop.addEventListener("touchmove", function(e) {
			e.preventDefault();
		}, false);
		if(detect.os.ios){
			self.system = 'ios';
			self.channel = self.$route.params.channel;
		}else{
			self.system = 'android';
			self.channel = self.$route.params.channel;
		}
		self.$.ajax({ 
			url:'/fish-backend/apis/app/getDownloadPath',   //提交的url
			type:'GET',
			beforeSend:function(xhr){		  	        		
				xhr.setRequestHeader('appidentifier',self.system);	
				xhr.setRequestHeader('source','web');
				xhr.setRequestHeader('channel',self.channel);	
		    },
		    success:function(res){
				self.$data.downloadUrl = res.data.downloadPath;
			}
		});	
	},
	methods: {
		goDownload(){	
			var self=this;
			location.href = this.$data.downloadUrl;
		},
		clickBox(confirm){
			var self=this;
			this.confirm=!confirm;
		},
		getImg(){
			var self=this;
			self.imgSrc="/fish-backend/apis/ope/captcha.jpg?date="+new Date().valueOf();
		},
		register(event){
			var self=this;
			if(self.tel.length!=11){
				self.$data.showMsg=true;
				self.$data.alertMsg='请输入正确的手机号';
				setTimeout(function(){
					self.$data.showMsg=false;
				},2000);
				return;
			}
//			if(!self.confirm){
//				self.$data.showMsg=true;
//				self.$data.alertMsg='请阅读并同意用户协议';
//				setTimeout(function(){
//					self.$data.showMsg=false;
//				},2000);
//			}else{
			var _date=new Date().getTime();
			var sign = "_date="+_date+"&code="+self.$data.code+"&phone="+self.$data.tel+"&op123$#@!0987&*(";
			sign = md5.md5(sign).toLocaleLowerCase();
			self.$.ajax({
				url:'/fish-backend/apis/ope/simpleRegister',
				type:'POST',
				beforeSend:function(xhr){		 
					xhr.setRequestHeader('appidentifier',self.system);
					xhr.setRequestHeader('source','web');
					xhr.setRequestHeader('channel',self.channel);
				},
				data:{	
					'_date':_date,
					'code':self.code,
					'phone':self.tel,			 	
					'sign':sign
				},
				success:function(data){
					self.$data.showMsg=true;
					self.$data.alertMsg=data.msg;
					if(data.code==0){
						self.showPop=true;	
						_taq.push({convert_id:"93384419857", event_type:"form"});
						_taq.push({convert_id:"93645955728", event_type:"form"});
						_taq.push({convert_id:"93645923479", event_type:"form"});
					}
				}
			});
		},
		getMsg(event){
			var self=this;
			if(self.tel.length!=11){
				self.$data.showMsg=true;
				self.$data.alertMsg='请输入正确的手机号';
				setTimeout(function(){
					self.$data.showMsg=false;
				},2000);
				return;
			}
			if(self.imgCode==""){
				self.$data.showMsg=true;
				self.$data.alertMsg="请输入图形验证码";
				setTimeout(function(){
					self.$data.showMsg=false;
				},2000);				
				return;
			}
			request.getCheckUser({'phone':self.tel},function(res){
				if(!res.data){
					var _date=new Date().getTime();
					var sign = "_date="+_date+"&imgCode="+self.$data.imgCode+"&phone="+self.$data.tel+"&op123$#@!0987&*(";
					sign = md5.md5(sign).toLocaleLowerCase();
					var param={	
						'_date':_date,
						'imgCode':self.imgCode,
						'phone':self.tel,			 	
						'sign':sign
					}
					self.$.ajax({
						url:'/fish-backend/apis/ope/sms/send',
						type:'POST',
						beforeSend:function(xhr){		 
							xhr.setRequestHeader('appidentifier',self.system);
							xhr.setRequestHeader('source','web');
							xhr.setRequestHeader('channel','yingyu686');
						 },
						 data:{	
							'_date':_date,
							'imgCode':self.imgCode,
							'phone':self.tel,			 	
							'sign':sign
						 },
						 success:function(data){
						 	if(data.msg!="请求成功"){
						 		self.$data.showMsg=true;
						 		self.$data.alertMsg=data.msg;
						 		if(data.code==20011){
						 			self.getImg();
						 		}
						 		setTimeout(function(){
							 		self.$data.showMsg=false;
							 	},2000);
						 	}else{
								self.$data.msg=60;
								self.$data.msgS="S";
								self.$(event.target).css("pointer-events",'none');
								var timer = setInterval(function(){
									self.$data.msg--;
									if(self.$data.msg==0){
										clearInterval(timer);
										self.$data.msg="获取验证码";
										self.$(event.target).css("pointer-events",'auto');
									}
									if(self.$data.msg!="获取验证码"){
										self.$data.msgS="S";
									}else{
										self.$data.msgS="";
									}
								},1000);						 		
						 	}
						 }
					});
				}else{
					self.$data.showMsg=true;
					self.$data.alertMsg="该手机号已被注册";
					setTimeout(function(){
						self.$data.showMsg=false;
					},2000);
				}
			});
		}
	}
}			
</script>

<style lang="scss">
.ml-register2{
	background:#fff;
	position: relative;
	.pop{
		position:fixed;
		width:100%;
		height:100%;
		background:#909090;
		top: 0;
	    opacity: 0.7;
	    z-index:10; 
	}
	.pop-box{
		position:fixed;
		z-index:200;
		width:90%;
		left:5%;
		top:15%;
		border-radius: 35px;
		text-align: center;
		.logo-box{
			background:rgba(245,248,254,1);
			border-radius: 8px;
			width:260px;
			overflow:hidden;
			margin:60px auto 0;
			padding:10px 20px; 
			div{
				float:left;
			}
			ul{
				float:right;
				li:first-child{
					font-size:36px;
					font-family:MicrosoftYaHei;
					color:rgba(0,0,0,1);
				}
				li:last-child{
					font-size:22px;
					font-family:MicrosoftYaHeiLight;
					color:rgba(0,0,0,1);
					margin-top:10px;
				}
			}
		}
		p.big-text{
			color:#FF3800;
			font-size:50px;
			margin-top:60px;
		}
		p{
			font-family:Adobe Heiti Std R;
			color:rgba(0,0,0,1);
			line-height:22px;
			margin-top:270px;
			span{
				color:#FF3800;
				font-size:36px;
			}
		}
		.btn{
			background:rgba(253,255,253,1);
			background-image: linear-gradient(-90deg, #325CED 0%, #01A4E8 100%);
			border-radius: 32px;
			width:40%; 
			color:#fff;
			padding:18px;
			margin:40px auto 0;
		}
	}	
	.ml-bg-register-009{
		margin-top:50px;
		p{
			text-align: center;
		}
		p:first-child{
			font-size:32px;
			font-family:FZLTZCHK--GBK1-0;
			color:rgba(250,92,11,1);
			padding-top:60px;
		}
		p:nth-child(2){
			font-size:74px;
			font-family:Impact;
			color:rgba(250,92,11,1);
			margin-top:20px;
			span:first-child{
				font-size:36px;
			}
			span:last-child{
				font-size:22px;
			}
		}
		p:nth-child(3){
			font-size:21px;
			font-family:FZLTHK-GBK1-0;
			color:rgba(250,92,11,1);
			margin-top:20px;
		}
		p:last-child{
			font-size:21px;
			font-family:FZLTHK-GBK1-0;
			color:rgba(132,132,132,1);
			margin-top:60px;
		}
	}
	.adv-ul{
		margin-top:20px;
		background:#fff;
		overflow: hidden;
		padding-top:40px;
		li:first-child{
			width:36%;
		}
		li:nth-child(2){
			width:34%;
		}
		li:last-child{
			width:30%;
		}
		li{
			float:left;
			p.title{
				font-family: PingFang-SC-Regular;
				font-size: 30px;
				color: #FF666F;
				letter-spacing: -1.17px;
				text-align: center;
				padding:20px 0 15px;
			}
			p.content{
				font-family: PingFang-SC-Regular;
				font-size: 20px;
				color: #666;
				letter-spacing: -0.78px;
				text-align: center;
				line-height: 40px;
			}
		}
	}
	.input-box{
		padding:20px 0 10px;
		div{
			background:rgba(255,66,0,1);
			border-radius: 8px ;
			font-size:43px;
			font-family:FZLTDHK-GBK1-0;
			color:rgba(255,255,255,1);
			line-height:90px;
			width:90%;
			margin:0 auto;
			text-align: center;
			height:90px;
		}
		p{
			width:90%;
			border-radius: 16px;
			margin:30px auto;
			overflow: hidden;
			background:fff;
			input{
				border:none;
				padding:0 30px;
				height:90px;
				border-radius: 16px;
				box-sizing: border-box;
				font-family: PingFang-SC-Regular;
				font-size: 30px;
				color: #666666;
				letter-spacing: 4px;
				border:0;
				background: rgba(217,217,217,1);
			}
			.user-input{					
				background: rgba(217,217,217,1);

				width:100%;
				margin:0 auto;				
			}
			.code-input{
				width:60%;
				background: rgba(217,217,217,1);				
				margin:0 auto;
			}
			span{
				display: inline-block;
				height:85px;
				line-height:70px;
				font-family: PingFang-SC-Regular;
				font-size: 34px;
				color: #fff;
				letter-spacing: -0.82px;
				box-sizing: border-box;
				padding:10px 0 10px 0px;
				box-sizing: border-box;
				position: relative;
				top:6px;
				width:32%;
				margin:0 auto;
				float:right;
				text-align: center;
				background:rgba(255,66,0,1);
				border-radius: 16px;
			}
			img{
				width:32%;
				margin-left:3%;
				height:70px;
				position: relative;
				top:30px;
			}
			input:focus{
				 outline: none;
			}	
			input::-webkit-input-placeholder{
            	font-family: PingFang-SC-Regular;
				font-size: 30px;
				color: rgba(96,95,95,1);
				letter-spacing: 0.8px;
	        }
	        input::-moz-placeholder{
            	font-family: PingFang-SC-Regular;
				font-size: 30px;
				color: rgba(96,95,95,1);
				letter-spacing: 0.8px;	        	
	        }
	        input:-moz-placeholder{
            	font-family: PingFang-SC-Regular;
				font-size: 30px;
				color: rgba(96,95,95,1);
				letter-spacing: 0.8px;	        	
	        }
	        input:-ms-input-placeholder{
            	font-family: PingFang-SC-Regular;
				font-size: 30px;
				color: rgba(96,95,95,1);
				letter-spacing: 0.8px;	        	
	        }
		}	
	}
	.bottom1{
		font-family: PingFangSC-Light;
		font-size: 20px;
		color: #959595;
		letter-spacing: 0;
		text-align: center;
		width:100%;
		padding:10px 0 5px;
		padding-top:50px;
		background:#fff;
	}
	.bottom3{
		font-family: PingFangSC-Light;
		font-size: 20px;
		color: #959595;
		letter-spacing: 0;
		text-align: center;
		width:100%;
		padding:5px 0 0;
		padding-bottom:10px;
		background:#fff;
	}
	.bottom2{
		background: #FD592B;
		text-align: center;
		width:100%;
		padding:15px 0;
		span:first-child{
			font-family: PingFang-SC-Regular;
			font-size: 24px;
			color: #FFFFFF;
			letter-spacing: 0;
		}
		span:last-child{
			opacity: 0.8;
			font-family: PingFang-SC-Light;
			font-size: 20px;
			color: #FFFFFF;
		}
	}
}	
</style>